<template>
  <div class="input-wrapper">
    <div>
      <el-input :placeholder="placeholder" v-model="keyword" @keyup.enter.native="search">
        <el-button slot="append" icon="el-icon-search" @click.native="search"></el-button>
      </el-input>
    </div>    
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入您要搜索的内容'
    }
  },
  data() {
    return{
      keyword: ''
    }
  },
  methods: {
    search() {
      this.$emit('search', this.keyword)
    }
  }
}
</script>
<style lang="scss" scoped>
.input-wrapper{
  font-size: 14px;
  padding: 20px;
  .el-input{
    width: 255px;
    height: 32px;
    line-height: 20px;
    border-radius: 6px;
    text-align: center;
    border: none;
  }
}
.input-wrapper /deep/ .el-button{
  .el-icon-search{
    font-size: 24px;
    color: #ccc;
  }
}
.input-wrapper /deep/ .el-input-group__append{
  background-color: rgba(221, 221, 221, 1);
}
</style>